<template>
	<div class="img-view-wrap" ref="buildimgBody">
		<div class="img-view-body" @mousedown.prevent="mousedown" ref="buildimgBox">
			<img ref="buildimg" :src="BaseUrl+'/admin/sys-file/' + cuurentFloorModal.image" title="鼠标可拖动，缩放"
				v-if="cuurentFloorModal.image" @mouseover="stopFloorAuto" @mouseleave="startFloorAuto">
			<span v-else style="color: #fff;font-size: 16px;">暂无平面图</span>
			<template v-if="cuurentFloorModal.image">
				<div class="sensor-pointer" v-for="item in sensorMarkers" :key="item.code"
					@click="selectPointer(item.code)"
					:style="{'left':item.positionSignX+'px','top':item.positionSignY+'px'}"
					:class="{'abnoraml':item.status===2,'alarm':item.status===1,'fault':item.status===0,'offline':item.status===4}">
					<!-- 弹框 -->
					<div class="pointer-modal card-item" v-show="item.isSelect" ref="modelDialog">
						<image src="../../static/img/floor-model-close.png" mode="" class="close-png"
							@click="toCloseModel(item.code)"></image>

						<div class="item-top">
							<image :src="item.deviceIcon" class="top-img" mode=""></image>
							<div class="top-content">
								<div class="title" :style='{color:[item.color]}'>{{item.deviceTypeName}}
								</div>
								<div class='id'>ID: {{item.code}}</div>
							</div>
						</div>
						<!-- 位置描述 -->
						<div class="address-desc">
							<image src="../../static/img/marker.png" mode="" class="marker-img"></image>
							<span class="address-text">{{item.addressDesc}}</span>
						</div>
						<!-- 内容描述 -->
						<div class='info-desc'>
							<div class="desc-left">
								<image src="../../static/img/dianqihuozai.png" mode="" class="left-img">
								</image>
								<div class="img-bg">
									<img src="../../static/img/device-bottom.png" class="bottom-img" alt="">
								</div>
							</div>
							<div class="desc-right">
								<!-- 按钮控制 -->
								<div class='btns'>
									<button class="control-btn">
										<img src="../../static/img/liandongkongzhi.png" class="control-img" alt="">
										<span>控制</span>
									</button>
									<button class="">
										<img src="../../static/img/monitor-video.png" class="control-img" alt="">
										<span>监控</span>
									</button>
								</div>
								<!-- 描述板块 -->
								<div class='desc-content'>
									<div class="content-item">
										<span class='status-title'>设备状态:</span>
										<span class='status-content' :style={color:[item.color]}>{{item.text}}</span>
									</div>
								</div>
								<div class='desc-content'>
									<div class="content-item">
										<span class='status-title'>告警信息:</span>
										<span class='status-content'
											:style={color:[item.color]}>{{item.alarmReason}}</span>
									</div>
								</div>
								<div class='desc-content'>
									<div class="content-item">
										<span class='status-title'>具体时间:</span>
										<span class='status-content'>{{item.createTime}}</span>
									</div>
								</div>
							</div>
						</div>
						<scroll-view scroll-y="true" style="height: 65px;">
							<div class='parameter-information' @mousewheel.stop="preventWheel">
								<div class='information-item' v-for="item1 in item.pointDatas" :key="item1.id">
									<div class='item-num' v-html="item1.lastAlarmInfo? item1.lastAlarmInfo:'--'">
									</div>
									<div class='item-detail'>{{item1.pointName}}<span
											v-html="item1.pointType===1?'('+item1.unit+')' : '' "></span>
									</div>
								</div>
							</div>
						</scroll-view>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
</script>

<style>
</style>
